<template>
  <div class="GGLBody wap">
    <div class="GGLTop" :class="showMask?'showMaskStyle':''">
      <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">
        搭赠列表
        <a class="headRight" slot="right" @click="goGGSettingPage">搭赠设置</a>
      </x-header>
      <div
        @click="showDialog"
        class="allStatus flex-direction-column display-flex align-items-center justify-content-flex-center"
      >
        <p v-if="selectIndex==99">
          全部状态
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==0">
          未开始
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==1">
          进行中
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==2">
          已结束
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==9">
          已停止
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
      </div>
      <div
        class="statusList flex-direction-column display-flex align-items-center justify-content-flex-center"
        v-show="showMask"
      >
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(0)"
        >
          <span :class="selectIndex==0?'selectText':''">未开始</span>
          <img v-show="selectIndex==0" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(1)"
        >
          <span :class="selectIndex==1?'selectText':''">进行中</span>
          <img v-show="selectIndex==1" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(2)"
        >
          <span :class="selectIndex==2?'selectText':''">已结束</span>
          <img v-show="selectIndex==2" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(9)"
        >
          <span :class="selectIndex==9?'selectText':''">已停止</span>
          <img v-show="selectIndex==9" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(99)"
        >
          <span :class="selectIndex==99?'selectText':''">全部状态</span>
          <img v-show="selectIndex==99" src="../../../../assets/img/order/select.png" alt />
        </p>
      </div>
    </div>
    <div class="main">
      <scroller v-if="dataArr.length>0">
        <ul
          class="specialOfferList flex-direction-column display-flex align-items-center justify-content-flex-center"
        >
          <li
            v-for="(item,index) in dataArr"
            :key="index"
            class="specialOfferItem display-flex flex-direction-row"
          >
            <div class="specialOfferContent display-flex flex-direction-column">
              <p
                v-if="item.buyGoods!==null"
                class="display-flex flex-direction-row align-items-center"
              >
                <span>[{{item.buyGoods.brandName}}] {{item.buyGoods.name}} {{item.buyGoods.spec}}</span>
              </p>
              <div class="soTip">
                <div
                  v-if="item.giftGoods!==null"
                  class="soTipName display-flex flex-direction-row align-items-center justify-content-flex-center"
                >
                  <span style="color: #FE3B49;margin-top: .05rem">赠品:</span>
                  <span
                    class="name"
                    style="color: #333333"
                  >[{{item.giftGoods.brandName}}] {{item.giftGoods.name}}</span>
                </div>
                <div class="display-flex flex-direction-row flex-wrap-wrap">
                  <span
                    v-for="(j,jIndex) in item.activityFullRuleVOList"
                    :key="jIndex"
                    style="color: #333333;font-size: 12px"
                  >满{{j.num}}件搭赠{{j.giftNum}}件</span>
                </div>
              </div>
              <!--<span>有效期：{{item.beginTime.split(' ')[0]}} 至 {{item.endTime.split(' ')[0]}}</span>-->
              <span>开始时间：{{item.beginTime}}</span>
              <span>结束时间：{{item.endTime}}</span>
              <span>
                参与客户：
                <span v-for="(j,jIndex) in item.distributorCategoryVOList" :key="jIndex">
                  {{j.distributorCategoryName}}
                  <span
                    v-if="jIndex!=(item.distributorCategoryVOList.length-1)"
                  >、</span>
                </span>
              </span>
            </div>
            <div
              class="specialOfferBtnGroup display-flex flex-direction-column align-items-center justify-content-flex-justify"
            >
              <p
                class="statusText"
                :style="{color:(item.state==1?'#F7BA45':(item.state==0?'#4BC1A1':'#BBBBBB'))}"
              >{{item.state==0?'未开始':(item.state==1?'进行中':(item.state==2?'已结束':'已停止'))}}</p>
              <div style="margin-bottom: 10px">
                <p
                  v-if="item.state==0||item.state==1"
                  class="closeBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                  style="background-color: #8E919F"
                  @click="endActivity(item.id)"
                >立即结束</p>
                <p
                  v-if="item.state==2||item.state==3"
                  class="closeBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                >立即结束</p>
                <p
                  v-if="item.state==0||item.state==1"
                  class="shareBtn hasShareBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                  @click="showShareDialogFn(item)"
                >
                  <span>分享</span>
                  <img src="../../../../assets/img/order/shareGoods.png" alt />
                </p>
                <p
                  v-if="item.state==2||item.state==3"
                  class="shareBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                >
                  <span>分享</span>
                  <img src="../../../../assets/img/order/shareBtnG.png" alt />
                </p>
              </div>
            </div>
          </li>
        </ul>
      </scroller>
      <div
        v-else
        class="display-flex flex-direction-row align-items-center justify-content-flex-center"
      >
        <img
          @click="initData(selectIndex)"
          style="width: 3rem;margin-top: 2rem"
          src="../../../../assets/img/customer/data_empty.png"
          alt
        />
      </div>
    </div>

    <div
      v-show="showMask"
      @click="showMask=false"
      class="mask"
      style="display: block;opacity: 0.5;"
    ></div>
  </div>
</template>

<script>
export default {
  name: "giftGiveList",
  data() {
    return {
      showMask: false,
      selectIndex: 99,
      status: 2,
      dataArr: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    showShareDialogFn(item) {
      // this.showShareDialog = true;
      this.shareImg = item.buyGoods.defaultPhoto;
      this.shareTitle =
        "【" +
        item.buyGoods.brandName +
        "】" +
        item.buyGoods.name +
        item.buyGoods.spec +
        ",搭赠抢购中!";
      this.shareLink = this.$webUrl + "good/operate?goodId=" + item.buyGoods.id;
      this.$callJava({
        code: 1015, // 分享特价商品
        goodsImg: this.shareImg,
        goodsLink: this.shareLink,
        goodsTitle: this.shareTitle
      });
    },
    showDialog() {
      this.showMask = !this.showMask;
    },
    closeDialog(i) {
      this.showMask = false;
      this.selectIndex = i;
      this.initData(i);
    },
    goGGSettingPage() {
      if (this.$fromApp(this)) {
        this.$callJava({
          url: this.$webUrl + "MarketingActivities/GiftGiveSetting?from=app"
        });
      } else {
        this.$router.push("/MarketingActivities/GiftGiveSetting");
      }
    },
    initData(id = "") {
      if (id == 99) {
        id = "";
      }
      this.$ajax.get(
        "activity/full_gift/list",
        res => {
          // console.log(res)
          if (res.code == "200") {
            this.dataArr = res.data;
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { state: id }
      );
    },
    endActivity(val) {
      let arr = [];
      arr.push(val);
      this.$ajax.post("activity/end", { ids: arr.join(",") }, res => {
        console.log(res);
        if (res.code == "200") {
          if (this.selectIndex != 99) {
            this.initData(this.selectIndex);
          } else {
            this.initData();
          }
        } else {
          this.$vux.toast.text(res.msg, "center");
        }
      });
    }
  }
};
</script>

<style lang="less" type="text/less" scoped>
ul > li {
  list-style: none;
}
input {
  -webkit-appearance: none;
}
.showMaskStyle {
  z-index: 100000 !important;
}
.GGLBody {
  .GGLTop {
    width: 100%;
  }
  .headRight {
    font-size: 16px;
    color: #ffffff;
  }
  .allStatus {
    height: 0.88rem;
    font-size: 16px;
    color: #333333;
    width: 100%;
    background-color: #ffffff;
    font-weight: bold;
    img {
      width: 8px;
      height: 8px;
      margin-bottom: 2px;
    }
  }
  .statusList {
    background-color: #ffffff;
  }
  .statusItem {
    width: 100%;
    height: 0.86rem;
    border-top: 1px solid #ebebeb;
    span {
      margin-left: 0.3rem;
      font-size: 16px;
      color: #222222;
    }
    img {
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
    }
    .selectText {
      color: #527dd9;
    }
  }
  .specialOfferList {
    margin-top: 0.2rem;
    .specialOfferItem {
      width: 6.9rem;
      /*height: 2.85rem;*/
      border-radius: 16px;
      background-color: #ffffff;
      margin-bottom: 0.2rem;
      .specialOfferContent {
        width: 5rem;
        padding-left: 10px;
        margin-top: 8px;
        p {
          font-size: 15px;
          height: 0.7rem;
          font-weight: bold;
          span {
            color: #222222;
          }
        }
        span {
          font-size: 13px;
          margin: 2px 0;
          color: #999999;
        }
        .soTip {
          width: 4.4rem;
          text-indent: 0.3rem;
          border-radius: 0.3rem;
          background-color: #fdf8f4;
          border: 1px solid #ffead9;
          .soTipName {
            width: 4.2rem;
            .name {
              width: 3rem;
              font-size: 12px;
              font-weight: normal;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }
      .specialOfferBtnGroup {
        width: 1.9rem;
        .statusText {
          margin-top: 15px;
          font-size: 15px;
          font-weight: 500;
        }

        .shareBtn {
          width: 1.38rem;
          height: 0.52rem;
          color: #ffffff;
          background-color: #eeeeee;
          line-height: 0.52rem;
          text-align: center;
          border-radius: 6px;
          margin-top: 8px;
          font-size: 12px;
          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-left: 0.1rem;
          }
        }
        .hasShareBtn {
          background-color: #ffffff;
          color: #333333;
          border: 1px solid #dddddd;
        }
        .closeBtn {
          width: 1.38rem;
          height: 0.52rem;
          color: #ffffff;
          background-color: #eeeeee;
          line-height: 0.52rem;
          text-align: center;
          border-radius: 6px;
          font-size: 12px;
        }
      }
    }
  }
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    background-color: #000;
    z-index: 999;
  }
}
</style>
